<template>
	<view class="main">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- <nav-bar ref="navRef" title="支付"></nav-bar> -->
		<!-- #endif -->

		<view class="header flex_bw">
			<view class="header_left flex">
				<view @tap="changeTab(1)" :class="[tabVal === 1 ? 'act_header_tab' : '']">综合</view>
				<view class="header_left_line"></view>
				<view @tap="changeTab(2)" :class="[tabVal === 2 ? 'act_header_tab' : '']">最新</view>
			</view>
			<view class="header_right flex">
				<image :src="$imgsUrl('0x725070415', true)" mode=""></image>
				<view class="">为你展示真实评价</view>
			</view>
		</view>

		<!-- 评论 -->
		<view class="list">
			<view class="card" v-for="(item, idx) in dataList" :key="item.id">
				<view class="user flex">
					<view class="avatar">
						<image src="/static/images/icon-guest.png" mode=""></image>
					</view>
					<view class="user_right">
						<view class="user_info flex_bw">
							<view class="">用户名称</view>
							<view class="">2025-06-30</view>
						</view>
						<view class="buy_info flex_bw">
							<view class="star_box flex">
								<image v-for="star in 5" :key="star" :src="$imgsUrl('0x725070416', true)" mode=""></image>
							</view>
							<view class="buy_info_names u-line-1">已购 商品名称/工艺名称</view>
						</view>
					</view>
				</view>
				<!-- 评价内容 -->
				<view class="remark">
					<view class="">
						{{ item.isExpend ? item.remark : item.processTxt }}
					</view>
					<view :class="['expend_txt', item.isExpend ? 'act_expend_txt' : '']" v-if="item.isOverflow" @tap.stop="clickExpend(idx)">
						<view class="">{{ item.isExpend ? "收起" : "展开" }}</view>
						<view class="expend_txt_icon flex">
							<u-icon name="arrow-down" :size="16" color="#999999"></u-icon>
						</view>
					</view>
				</view>
				<!-- 评价内容 -->

				<!-- 图片 -->
				<view class="imgs">
					<view class="img_item" v-for="(url, uIdx) in item.imgs.slice(0, 6)" :key="uIdx" @tap.stop="viewImg(idx, uIdx)">
						<image :src="url" mode="aspectFill"></image>
						<view class="img_item_num" v-if="item.imgs.length > 6 && uIdx === 5">
							{{ item.imgs.length }}
						</view>
					</view>
				</view>
				<!-- 图片 -->
			</view>
		</view>
		<!-- 评论 -->

		<view class="footer">
			<view class="submit flex_center" @tap.stop="submit">立即预约</view>
		</view>
		<!-- 底部 -->

		<!-- 用于获取文字宽度 -->
		<view class="dict_txt">
			<text class="zh_txt">金</text>
			<text class="cn_txt_1">8</text>
			<text v-for="(item, idx) in enList" :key="item" :class="[`cn_txt-${item}`]">{{ item }}</text>
			<text v-for="(item, idx) in EnList" :key="item" :class="[`cn_txt-${item}`]">{{ item }}</text>
		</view>
		<!-- 用于获取文字宽度 -->
	</view>
</template>

<script>
import { getEleInfo } from "../../common/util/common";

var widhtMap = {
	number: 8.22,
	zhStr: 14,
	enStr: 13.6,
	sysWidth: uni.getWindowInfo().screenWidth
};

function isChineseChar(char) {
	const code = char.charCodeAt(0);
	return code >= 0x4e00 && code <= 0x9fa5;
}
var regEn = new RegExp("[A-Za-z]+");
var regNum = /^[0-9]+\.?[0-9]*$/;
/**
 * 获取文字宽度
 * @param {String} txt
 */
function getCharWidth(txt) {
	if (widhtMap[txt]) {
		return widhtMap[txt];
	}
	if (regEn.test(txt)) {
		return widhtMap.enStr;
	} else if (regNum.test(txt)) {
		return widhtMap.number;
	}
	return widhtMap.zhStr;
}

const testInfo = [
	{
		id: "11",
		remark:
			"评价文本字段评价gg文本hah字mm段ahkgho评价文ah本字2234段评6价文本字段846评价hh文本字段评价文2本3字4段6评780价031文9本字ha段m评H价AH文fs本HSU字PSK段Q评C价文D本字SA段评Z价文KP本字B段评V价评价文本字段评价gg文本hah字mm段ahkgho评价文ah本字2234段评6价文本字段846评价hh文本字段评价文2本3字4段6评780价031文9本字ha段m评H价AH文fs本HSU字PSK段Q评C价文D本字SA段评Z价文KP本字B段评V价评价文本字段评价gg文本hah字mm段ahkgho评价文ah本字2234段评6价文本字段846评价hh文本字段评价文2本3字4段6评780价031文9本字ha段m评H价AH文fs本HSU字PSK段Q评C价文D本字SA段评Z价文KP本字B段评V价",
		imgs: [
			"https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650",
			"https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0",
			"https://img95.699pic.com/photo/50064/7148.jpg_wh860.jpg",
			"https://ts1.tc.mm.bing.net/th/id/R-C.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0",
			"https://ts1.tc.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0",
			"https://www.2008php.com/09_Website_appreciate/10-11-28/1290924227try.jpg",
			"https://img.shetu66.com/2023/04/25/1682391068745168.png",
			"https://file1.shop265.com/tk/20200805/49c5aceb26b2a897a337b2de6f7f9e7a.jpg",
			"https://img95.699pic.com/photo/50464/9776.jpg_wh860.jpg"
		]
	}
];

export default {
	components: {},
	data() {
		return {
			tabVal: 1, //1综合 2最新
			dataList: [],
			enList: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
			EnList: Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
		};
	},
	async onLoad() {
		await this.getElWidth();
		this.setTxt();
	},
	methods: {
		// 切换tab
		changeTab(val) {
			this.tabVal = val;
		},
		// 立即预约
		submit() {
			console.log("立即预约");
		},
		// 图片预览
		viewImg(idx, uIdx) {
			const urls = this.dataList[idx].imgs;
			uni.previewImage({
				urls,
				current: uIdx
			});
		},
		// 展开/收起
		clickExpend(idx) {
			const item = this.dataList[idx];
			item.isExpend = !item.isExpend;
		},
		// 设置文字
		setTxt() {
			const contentWidth = (widhtMap.sysWidth - 70) * 3 - widhtMap.zhStr * 5;
			testInfo.forEach((item) => {
				const remark = item.remark || "";
				let width = 0;
				let str = "";
				for (let i = 0; i < (remark || "").length; i++) {
					const txt = remark[i];
					const txtWidth = getCharWidth(txt);
					if (txtWidth + width < contentWidth) {
						str += txt;
						width += txtWidth;
					} else {
						break;
					}
				}
				// 短文本
				item.processTxt = str;
				// 是否展开
				item.isExpend = false;
				// 是否超出
				item.isOverflow = item.processTxt.length === remark.length ? false : true;
				if (item.isOverflow) {
					item.processTxt += "...";
				}
			});
			console.log("testInfo", testInfo);
			// this.dataList.push(testInfo)
			this.dataList = testInfo;
		},
		// 获取文字宽度
		getElWidth() {
			const list = this.enList.map((v) => `.cn_txt-${v}`);
			const listA = this.EnList.map((v) => `.cn_txt-${v}`);
			return getEleInfo([".zh_txt", ".cn_txt_1", ...list, ...listA], this).then((res) => {
				widhtMap.number = res[1].width;
				widhtMap.zhStr = res[0].width;
				const enRes = res.slice(2, 28);
				enRes.forEach((item, idx) => {
					widhtMap[this.enList[idx]] = item.width;
				});
				const EnRes = res.slice(28);
				EnRes.forEach((item, idx) => {
					widhtMap[this.EnList[idx]] = item.width;
				});
				console.log(widhtMap);
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #f5f6fa;
	padding-bottom: calc(84rpx + 32rpx + 52rpx + env(safe-area-inset-bottom) / 2);
	font-size: 28rpx;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	padding: 0 30rpx;
	background-color: #fff;
	border-top: 1px solid #f5f5f5;
	color: #888888;
	.header_left {
		font-weight: bold;
		color: #888888;
		.header_left_line {
			width: 1px;
			height: 30rpx;
			background-color: #e9e9e9;
			margin: 0 24rpx;
		}
		.act_header_tab {
			color: #222222;
		}
	}
	.header_right {
		color: #a0a0a0;
		font-size: 24rpx;
		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
	}
}

.list {
	padding-top: 100rpx;
	.card {
		margin-top: 24rpx;
		border-radius: 24rpx;
		background-color: #fff;
		padding: 30rpx;
		.imgs {
			display: flex;
			flex-wrap: wrap;
			padding-left: 78rpx;
			width: 100%;
			--margin-img: calc((100% - 594rpx) / 2);
			:nth-child(3n).img_item {
				margin-right: 0 !important;
			}
			.img_item {
				width: 198rpx;
				height: 192rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: var(--margin-img);
				margin-bottom: var(--margin-img);
				position: relative;
				.img_item_num {
					position: absolute;
					right: 0;
					bottom: 0;
					border-radius: 16rpx 0 0 0;
					background-color: rgba(0, 0, 0, 0.65);
					font-size: 24rpx;
					color: #fff;
					padding: 2rpx 10rpx;
				}
			}
		}
		.remark {
			position: relative;
			margin: 24rpx 0 24rpx 78rpx;
			.act_expend_txt {
				.expend_txt_icon {
					transform: rotate(-180deg);
				}
			}
			.expend_txt {
				position: absolute;
				bottom: 0;
				right: 0;
				padding-left: 18rpx;
				color: #999;
				display: flex;
				align-items: center;
				background-color: #fff;
				z-index: 2;
				.expend_txt_icon {
					transition: all 0.2s;
				}
				view {
					padding-right: 8rpx;
				}
			}
		}
		.user {
			.avatar {
				width: 62rpx;
				height: 62rpx;
			}
			.user_right {
				width: calc(100% - 62rpx);
				padding-left: 16rpx;
				.buy_info {
					color: #777777;
					font-size: 24rpx;

					.star_box {
						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 4rpx;
						}
					}
					.buy_info_names {
						width: 444rpx;
					}
				}
				.user_info {
					color: #999999;
					font-size: 24rpx;
					padding-bottom: 8rpx;
					:nth-child(1) {
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 24rpx 46rpx calc(52rpx + env(safe-area-inset-bottom) / 2) 46rpx;
	z-index: 5;
	background-color: #ffffff;
	box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
	.submit {
		width: 100%;
		height: 84rpx;
		background: #0a264f;
		border-radius: 16rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}
}

.dict_txt {
	position: fixed;
	bottom: 0;
	opacity: 0;
	left: 0;
}
</style>
